<template>
  <div style="height:100%">
    <div class="header">
      <div class="box">
        <h1>
          <img src="../assets/img/Scyphozoa.png" />
          <span>Scyphozoa music</span>
        </h1>
        <nav>
          <div
              class="listCss"
              v-for="(item, index) in listArr"
              :key="index"
              @click = handleSelect(index)
              :class="{ activeCss: activeVar === index }"
          >
            {{ item }}
          </div>
        </nav>
      </div>
      <div class="box">
        <input
            class="text"
            type="text"
            placeholder="请输入关键词~~~"
            name="search"
        />
        <input class="button" type="button" value="搜索" />
        <img class="touxiang" src="../assets/img/李知恩.jpg" />
        <nav>
          <img src="../assets/img/我的.png" class="img_1" @click="gotomy" />
          <img
              src="../assets/img/换肤.png"
              class="img_2"
              @click="gotopeeling"
          />
          <img
              src="../assets/img/设置.png"
              class="img_3"
              @click="gotoinstall"
          />
        </nav>
      </div>
    </div>
    <div class="contents">
      <div class="content">
        <!--指定组件的位置-->
         <router-view></router-view>
      </div>
    </div>

    <div class="app">
      <div class="footer">
        <span class="ziti"
        >关于maybe |服务条款 |用户服务协议 |隐私政策 |权利声明 |广告服务
          |客服中心 |网站导航</span
        ><br />
        <span class="ziti">
          maybe公司｜版权所有｜营业执照｜客服电话：123456789</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BBSHeader",
  data() {
    return {
      // 默认为0(如不需要默认可设为null)，点击时将索引赋值给active，从而实现点击选中效果
      activeVar: 0,
      //  循环列表
      listArr: ["首页", "我的主页", "社区", "MV", "VIP"],
    };
  },
  mounted() {
    var that = this;
    that.refresh();
  },
  methods: {
    gotomy() {
      //点击跳转至上次浏览页面
      // this.$router.go(-1);

      //指定跳转地址
      // this.$router.replace("/login");
    },
    gotopeeling() {
      //点击跳转至上次浏览页面
      // this.$router.go(-1)

      //指定跳转地址
      // this.$router.replace("/login");
    },
    gotoinstall() {
      //点击跳转至上次浏览页面
      // this.$router.go(-1);

      //指定跳转地址
      // this.$router.replace("/login");
    },
    refresh() {
    var that = this;
    var url = that.$route.path;
    switch (url) {
      case "/vip":
        that.activeVar = 4;
        break
      case "/mv":
        that.activeVar = 3;
        break
      case "/community":
        that.activeVar = 2;
        break
      case "/my":
        that.activeVar = 1;
        break
      case "/":
        that.activeVar = 0;
        break
      default:
        that.activeVar = -1;
    }
    },
    handleSelect(key) {
      this.activeVar = key;
      switch (key) {
          // 首页
        case 0:
          this.$router.push("/");
          break;
          // 我的主页
        case 1:
          this.$router.push("/my");
          break;
          // 社区
        case 2:
          this.$router.push("/community");
          break;
          // MV
        case 3:
          this.$router.push("/mv");
          break;
          // VIP
        case 4:
          this.$router.push("/vip");
          break;
        default:
          break;
      }
    }
  },
};
</script>



<style scoped>
h1 {
  display: flex;
  align-items: center;
  color: #45429e;
  font: normal 23px Arial, Helvetica, sans-serif;
  padding: 0px 20px;
}
h1 span {
  padding: 0 0 0 20px;
}
img {
  width: 50px;
  height: 50px;
}
nav {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: space-around;
  color: #45429e;
  margin: 0px 40px 0 0;
  font: 16px Arial, Helvetica, sans-serif;
}
nav a {
  padding: 0 30px;
  height: 100%;
  width: 70px;
  text-decoration: none;
  color: #608bd2;
  font-size: 16px;
  font-weight: normal;
  opacity: 0.9;
}
nav a:hover {
  opacity: 1;
}

/* 底部字体 */
.ziti {
  color: #f6f6f6;
  font-size: 10px;
}

/* 底部导航栏 */
/* 底部导航栏高度 */
:root {
  --footer-height: 20px;
}
body {
  padding: 0;
  margin: 0;
}
.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  line-height: var(--footer-height);
  background: #4f697d;
  color: #fff;
}

/* 顶部导航栏选中样式 */
/* 默认样式 */
.listCss {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  height: 60px;
  width: 70px;
  padding: 0 30px;
  text-decoration: none;
  color: #45429e;
  font-size: 16px;
  font-weight: normal;
  opacity: 0.9;
}
/* 选中时的样式 */
.activeCss {
  background: #d7f6fa;
}

/* 我的（图标） */
.img_1 {
  margin: 5px 0 0 30px;
  width: 40px;
  height: 40px;
}
/* 换肤（图标） */
.img_2 {
  margin: 3px 0 0 5px;
  width: 30px;
  height: 30px;
}
/* 设置（图标） */
.img_3 {
  margin: 1px -10px 0 5px;
  width: 20px;
  height: 20px;
}
/* 头像 */
.touxiang {
  border-radius: 50%;
}

/* 顶部导航栏 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  background-color: #aaeaf0;
  color: #ffffff;

  /*吸顶效果*/
  /* position: sticky; */
  position: fixed;
  /* !*兼容 -webkit 内核的浏览器*! */
  position: -webkit-sticky;
  /* !*必须设一个值，否则不生效*! */
  top: 0px;
  
  /* 让导航栏浮在网页的高层位置，遇到flash和图片时候也能始终保持最外层 */
  z-index: 9999;
}
.box {
  display: flex;
  align-items: center;
}

/* 文字 */
/* .active {
  display: flex;
  align-items: center;
  color: #608bd2;
  pointer-events: none;
  opacity: 1;
} */

/*搜索框*/
.text {
  height: 22px;
  font-size: 14px;
  border: 1px solid #ccc;
  padding: 3px 16px;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
}
.text:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075),
  0 0 8px rgba(82, 168, 236, 0.6);
}
.button {
  width: 60px;
  height: 30px;
  font-size: 14px;
  margin-right: 35px;
  border: 1px solid #608bd2;
  background-color: #608bd2;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* 下端 */
.contents {
  display: flex;
  height: 100%;
  justify-content: center;
}
.content {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #cff5f9;
  overflow: auto;
}
</style>